<template>
  <div class="custom-container p-5">

    <div class="menu_list">
      <div class="menu_list_item" :class="nowstep != item.ip ? '' : 'iscked'" v-for="item in appStore.panes"
        @click="changeck(item.ip)">
        <!--<img :src="img1" width="150" v-if="item.status==1">
        <img :src="img2" width="150" v-else-if="item.status==2">
        <img :src="img3" width="150" v-else>-->
        <p class="pa1">{{ item.ip }}</p>
        <p class="pa2">Modem类型:{{ item.mtype }}</p>
      </div>
      <!--<div class="icon2">
        <Icon icon="ci:add-plus-square" color="#52c41a" :size="40" />
      </div>-->
    </div>
    <template v-if="appStore.panes.length != 0">

      <a-row :gutter="16">
        <a-col :span="24">
          <div class="box_tit">
            {{ t('routes.demo.inet.sacn_log') }}
          </div>
          <div class="box_con" style="padding-top: 30px;">
            <a-form :model="startParams" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18 }">
              <a-row>
                <a-col :span="6">
                  <a-form-item :label="t('routes.demo.inet.rfin_title')">
                    <a-select ref="select" v-model:value="nowRfin" style="width: 100%"
                  :placeholder="t('routes.demo.inet.rfin_placeholder')" allowClear>
                      <a-select-option :value="item.id" v-for="item in rfinOptions" :key="item.id" >{{
                        item.name
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item :label="t('routes.demo.inet.starting_frequency_title')">
                    <a-input v-model:value="startParams.step"
                      :placeholder="t('routes.demo.inet.starting_frequency_placeholder')" />(MHz)
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item :label="t('routes.demo.inet.cut_off_frequency_title')">
                    <a-input v-model:value="startParams.st"
                      :placeholder="t('routes.demo.inet.cut_off_frequency_placeholder')" />(MHz)
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item :label="t('routes.demo.inet.minimum_symbol_rate_title')">
                    <a-input v-model:value="startParams.end"
                      :placeholder="t('routes.demo.inet.minimum_symbol_rate_placeholder')" />(MS/s)
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item :label="t('routes.demo.inet.scanning_step_title')">
                    <a-input v-model:value="startParams.rs_mix"
                      :placeholder="t('routes.demo.inet.scanning_step_placeholder')" />(MHz):
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row>

                <a-col :span="22" :offset="1"></a-col>
                <a-col :span="12" :offset="12">
                  <a-form-item>
                    <a-button type="primary" @click="do_start" style="margin-right: 15px;">{{
                      t('routes.demo.inet.start')
                    }}</a-button>
                    <a-button type="primary" danger @click="do_end" style="margin-right: 15px;">{{
                      t('routes.demo.inet.cancel')
                    }}</a-button>
                    <a-button color="warning" type="primary" @click="showEdit">{{
                      t('routes.demo.inet.high')
                    }}</a-button>

                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
            <a-row style="margin-bottom: 30px;">
              <a-col :span="12" :offset="6">
                扫描进度：
                <a-progress :percent="progress" :width="120" />
                <span class="spanaa1">持续时间：{{ time }}</span>
              </a-col>

            </a-row>
          <a-row>
            <a-col>
              <a-table class="ant-table-striped tablea1" :columns="columns" :data-source="dataList" size="middle"
                :rowKey="(record, index) => { return index }"
                :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)" :pagination="false">
                <template #action="{ record }">
                  <a-switch v-model:checked="record.switch" />
                </template>
                <template #action1="{ record }">
                  <a-button type="link" size="small" preIcon="ant-design:play-circle-outlined"
                          @click="dobind(record)">绑定通道
                </a-button>
                </template>
              </a-table>
            </a-col>
          </a-row>
          </div>
        </a-col>
      </a-row>
    </template>
    <div class="notice1" v-else>
      当前无可用的解调器,
      <span class="spanf1" @click="go_add">立即添加</span>
    </div>

    <a-modal v-model:visible="openEditRecord" title="高级设置" width="30%" :footer="null">
      <div class="p-5">
        <a-row type="flex" justify="center" align="top">
          <a-form style="width: 80%;padding-top: 20px;" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-col :span="24">
              <a-form-item :label="t('routes.demo.inet.scan_mode_title')">
                <a-select ref="select" v-model:value="scanparam.scan_mode" style="width: 100%"
                  :placeholder="t('routes.demo.inet.scan_mode_placeholder')" allowClear>
                  <a-select-option :value="item.id" v-for="item in scanOptions" :key="item.id">{{ item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label="t('routes.demo.inet.FEC_lock_title')">
                <a-select ref="select" v-model:value="scanparam.fec_lock_check" style="width: 100%"
                  :placeholder="t('routes.demo.inet.FEC_lock_placeholder')" allowClear>
                  <a-select-option :value="item.id" v-for="item in flockOptions" :key="item.id">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label="t('routes.demo.inet.MERGER_lock_title')">
                <a-select ref="select" v-model:value="scanparam.merger_lock_check" style="width: 100%"
                  :placeholder="t('routes.demo.inet.MERGER_lock_placeholder')" allowClear>
                  <a-select-option :value="item.id" v-for="item in mlockOptions" :key="item.id">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :label="t('routes.demo.inet.Scan_timeout_title')">
                    <a-input v-model:value="scanparam.out_time"
                      :placeholder="t('routes.demo.inet.Scan_timeout_placeholder')" />2000~16000（单位ms）
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
                <a-button type="primary" @click="do_Save">提交</a-button>
              </a-form-item>
            </a-col>
          </a-form>
        </a-row>
      </div>
    </a-modal>
    <a-modal v-model:visible="openbindRecord" title="绑定通道" width="30%" :footer="null">
      <div class="p-5">
        <a-row type="flex" justify="center" align="top">
          <a-form style="width: 80%;padding-top: 20px;" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-col :span="24">
              <a-form-item :label="t('routes.demo.inet.bindchn_title')">
                <a-select ref="select" v-model:value="bindparam.chn" style="width: 100%;color: #000;"
                  :placeholder="t('routes.demo.inet.bindchn_placeholder')" allowClear>
                  <a-select-option :value="item.value" v-for="item in Options" :key="item.value">{{ item.label
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
           
            <a-col :span="24">
              <a-form-item :wrapper-col="{ span: 14, offset: 6 }">
                <a-button type="primary" @click="do_bing_Save">绑定</a-button>
              </a-form-item>
            </a-col>
          </a-form>
        </a-row>
      </div>
    </a-modal>






  </div>
</template>
<script lang="ts">
import { useAppStore } from '/@/store/modules/app.ts';
import { defineComponent, onMounted, reactive, ref, Ref } from "vue";
import { Icon } from '/@/components/Icon';
import { Tag, Card } from 'ant-design-vue';
import { useRoute } from "vue-router";
import { get_scanparam, get_scanresult, get_scanresultallow, save_scanparam, scanset, sscan, stscan,get_term } from "/@/api/biz/index";
//import { ExclamationCircleOutlined, PoweroffOutlined, StarTwoTone } from '@ant-design/icons-vue';
import img1 from '/@/assets/images/222.png';
import img2 from '/@/assets/images/223.png';
import img3 from '/@/assets/images/224.png';
import { useI18n } from '/@/hooks/web/useI18n';
import { message } from "ant-design-vue";
import { useGo } from "/@/hooks/web/usePage";
import { useECharts } from '/@/hooks/web/useECharts';

export default defineComponent({
  components: {
    //charts,
    Icon,
  },
  setup() {
    const appStore = useAppStore();
    onMounted(() => {
      const router = useRoute()
      const ip = router.query.ip
      queryParams.ip = ip
      console.log(ip)
      nowstep.value = ip
      do_init()
      getScanParams()
      getList();
      setInterval(() => {
        getList();
        }, 10000)
      });
    const { t } = useI18n();
    //index扫描结果索引
    //modcode
    //modulation
    //pilots
    //puncture_rate
    //Spectrum
    const columns = [
      {
        title: t('routes.demo.inet.center_frequency'),
        dataIndex: 'cf',
      },
      {
        title: t('routes.demo.inet.modulation'),
        align: "center",
        dataIndex: 'modulation',
      },
      {
        title: t('routes.demo.inet.symbol_rate'),
        align: "center",
        dataIndex: 'rt',
      },
      {
        title: t('routes.demo.inet.signal_to_noise_ratio'),
        align: "center",
        dataIndex: "snr"
      },
      {
        title: t('routes.demo.inet.standard'),
        align: "center",
        dataIndex: 'std',
      },
      {
        title: t('routes.demo.inet.pilots'),
        align: "center",
        dataIndex: 'pilots',
      },
      {
        title: t('routes.demo.inet.encoding'),
        align: "center",
        dataIndex: 'modcode',
      },
      {
        title: t('routes.demo.inet.puncture_rate'),
        align: "center",
        dataIndex: 'puncture_rate',
      },
      {
        title: t('routes.demo.inet.frame_length_type'),
        align: "center",
        dataIndex: "frame_len"
      },
      {
        title: t('routes.demo.inet.rolloff_factor'),
        align: "center",
        dataIndex: 'rdc',
      },
      {
        title: t('routes.demo.inet.operate'),
        align: "center",
        dataIndex: 'lock',
        slots: { customRender: 'action1' },
      },
    ]
    const progress=ref()
    const time=ref('')
    const rfinOptions = ref([]);
    const scanOptions = ref([]);
    const flockOptions = ref([]);
    const timeoutOptions = ref([]);
    const mlockOptions = ref([]);
    const nowstep = ref('')
    const nowRfin = ref(2)
    const arr = ref('')
    const activeKey1 = ref([]);
    const activeKey2 = ref([]);
    const activeKey3 = ref([]);
    const activeKey4 = ref([]);
    const openEditRecord  = ref(false)
    const openbindRecord  = ref(false)
    const queryParams = reactive({
      cpn: 1,
      epc: 10,
      ip: '',
      rfin: 2,
    })

    const getParams = reactive({
      ip: '',
      rfin: 2,
    });
    const startParams = reactive({
      ip: '',
      rfin: 2,
      step: 1,
      st: 950,
      end: 2150,
      rs_mix: 1,
    });
    const endParams = reactive({
      ip: '',
      rfin: 2,
    });
    const scanparam = reactive({
      ip: '',
      scan_mode: undefined,
      fec_lock_check: undefined,
      merger_lock_check: undefined,
      out_time: undefined,
    });
    const bindparam = reactive({
      ip: '',
      chn: undefined,
      index: undefined,
    });
    const dataList = ref([])
    const loading = ref(false)
    const Options = reactive([
      { value: 1, label: '通道1' },
      { value: 2, label: '通道2' },
      { value: 3, label: '通道3' },
      { value: 4, label: '通道4' },
    ]);
    const paginationOption = reactive({
      showSizeChanger: true,
      total: 0,
      current: 1,
      onChange: changePageInfo,
      onShowSizeChange: changePageInfo
    });

    const visible = ref<boolean>(false);
    function handleOk() {

      visible.value = false;
    };


    function changePageInfo(page, pageSize) {
      queryParams.cpn = page
      queryParams.epc = pageSize
      getList()
    }
    function do_init() {
      loading.value = true;
      get_term({})
        .then((res) => {
          rfinOptions.value=res.data.data.result.data.SELECT.rfin.select;
          scanOptions.value = res.data.data.result.data.SELECT.scan_mode.select;
          flockOptions.value = res.data.data.result.data.SELECT.fec_lock_check.select;
          mlockOptions.value = res.data.data.result.data.SELECT.merger_lock_check.select;
          loading.value = false;
        })
        .catch(() => {
          //message.error("连接超时，请稍后再试！");
          loading.value = false;
        });
    }
    function getList() {
      loading.value = true
      get_scanresult(queryParams).then(res => {
        dataList.value = res.data.data.result.data.chn
        progress.value=res.data.data.result.data.progress
        time.value=res.data.data.result.data.time
        if (!nowstep.value) {
          //nowstep.value = res.data.data.result.data[0].ip
        }
        //paginationOption4.current = queryParams4.cpn
        //paginationOption4.total = res.result.cnt
        loading.value = false
      }).catch(() => {
        // message.error("连接超时，请稍后再试！");
        loading.value = false
      });
    }
    function getScanParams() {
      loading.value = true
      getParams.rfin=nowRfin.value
      get_scanparam(getParams).then(res => {
        console.log(res.data.data.result.data)
        scanparam.scan_mode = res.data.data.result.data.scan_mode
        scanparam.fec_lock_check = res.data.data.result.data.fec_lock_check
        scanparam.merger_lock_check = res.data.data.result.data.merger_lock_check
        scanparam.out_time = res.data.data.result.data.out_time
        loading.value = false
      }).catch(() => {
        // message.error("连接超时，请稍后再试！");
        loading.value = false
      });

    }
    const showEdit = (record) => {
      openEditRecord.value=true
      //delete SubjectForm.data.parent_industry
    };
    const dobind = (record) => {
      bindparam.index=record.index
      openbindRecord.value=true
      //delete SubjectForm.data.parent_industry
    };
    
    function do_Save() {
      save_scanparam(scanparam)
        .then((res) => {
          //console.log(res);
          loading.value = false;
          message.success('修改成功！');
          getList();
        })
        .catch(() => {
          //message.error("连接超时，请稍后再试！");
          loading.value = false;
        });
    }
    function do_start(){
      startParams.rfin=nowRfin.value
      stscan(startParams)
        .then((res) => {
          //console.log(res);
          loading.value = false;
          message.success('已开始！');
          openEditRecord.value=false
          getList();
        })
        .catch(() => {
          //message.error("连接超时，请稍后再试！");
          loading.value = false;
        });
    }
    function do_end(){
      endParams.rfin=nowRfin.value
      console.log(nowRfin.value)
      sscan(endParams)
        .then((res) => {
          //console.log(res);
          loading.value = false;
          message.success('已停止！');
          getList();
        })
        .catch(() => {
          //message.error("连接超时，请稍后再试！");
          loading.value = false;
        });
    }
    function do_bing_Save(){
      scanset(bindparam)
        .then((res) => {
          //console.log(res);
          loading.value = false;
          message.success('已绑定！');
          openbindRecord.value=false
          getList();
        })
        .catch(() => {
          //message.error("连接超时，请稍后再试！");
          loading.value = false;
        });
    }
    function changeck(ip: string) {
      nowstep.value = ip
      queryParams.ip = ip
      scanparam.ip = ip
      getParams.ip = ip
      startParams.ip = ip
      endParams.ip = ip
      bindparam.ip = ip
      getScanParams()
      getList()
    }
    const go = useGo();
    function go_add() {
      go('/system/modemSet')
    }
    return {
      dataList,
      columns,
      paginationOption,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      activeKey1,
      activeKey2,
      activeKey3,
      activeKey4,
      img1,
      img2,
      img3,
      nowstep,
      arr,
      changeck,
      t,
      go_add,
      visible,
      handleOk,
      appStore,
      startParams,
      Options,
      openEditRecord,
      showEdit,
      scanparam,
      rfinOptions,
      scanOptions,
      flockOptions,
      timeoutOptions,
      mlockOptions,
      do_Save,
      do_start,
      do_end,
      nowRfin,
      dobind,
      openbindRecord,
      bindparam,
      do_bing_Save,
      progress,
      time,
    }
  }

})

</script>

<style lang="less" scoped>
.spane1 {
  color: #0960bd;
  cursor: pointer;
}

.list1 {
  padding: 20px 0;
}

.content1 {
  padding: 15px 0;
  text-indent: 24px;
}

.hh1 {
  line-height: 34px;
  text-align: center;
  font-weight: bold;
}

.dd1 {
  line-height: 34px;
}

.dd2 {
  line-height: 34px;
  text-indent: 24px;
}

.dd3 {
  line-height: 34px;
  text-indent: 24px;
  float: right;
  margin: 20px 0;
}

.coll1 {
  margin-bottom: 50px;
}

.menu_list {
  display: flex;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
  flex-wrap: wrap;
}

.menu_list_item {
  margin: 0;
  width: 200px;
  height: 80px;
  padding: 5px 0;
  //border-radius: 10px;
  text-align: center;
  //border: 5px solid #87e8de;
  color: #08979c;
  background-image: linear-gradient(#4b4b4b, #323232);
  margin-right: 15px;
  position: relative;
  margin-top: 10px;
}

/*
.menu_list_item{
  margin: 0 20px;
  width: 120px;
  height: 120px;
  padding: 30px 0;
  border-radius: 100%;
  text-align: center;
  border: 5px solid #87e8de;
  color: #08979c;
  background: #e6fffb;
}*/
.menu_list_item.iscked {
  color: #096dd9;
  //background: #e6f7ff;
  //border-color: #91d5ff;
  border: 1px solid #096dd9;
}

.menu_list_item.iscked .pa1 {
  color: #fff;
}

.box_tit {
  position: relative;
  padding: 12px 16px;
  padding-left: 40px;
  color: #fff;
  line-height: 22px;
  cursor: pointer;
  transition: all 0.3s;
  box-sizing: border-box;
  border-radius: 0 0 2px 2px;
  border: 1px solid #d9d9d9;
  background: #222222;
}

.box_con {
  overflow: hidden;
  color: #fff;
  background-color: #444;
  box-sizing: border-box;
  border-radius: 0 0 2px 2px;
  border: 1px solid #d9d9d9;
  border-top: 0;
}

.font1 {
  position: relative;
  top: 2px;
}

.icon2 {
  padding-top: 10px;
  margin-left: 20px;
}

.pa1 {
  color: #fff;
  font-size: 16px;
  margin: 0;
  margin-top: 10px;
  line-height: 30px;
  font-weight: bold;
}

.pa2 {
  font-size: 12px;
  color: #93d2fb;
  margin: 0;
  line-height: 20px;
}

.pa3 {
  position: absolute;
  right: 10px;
  top: 0;
  color: red;
  font-weight: bold;
  cursor: pointer;
}

.notice1 {
  width: 100%;
  padding-top: 150px;
  text-align: center;
  color: #fff;
  font-size: 16px;
}

.spanf1 {
  color: #05e618;
}

.char1 {
  background-image: linear-gradient(#535353, #060606);
}

.ant-divider-dashed {
  color: #fff;
}

.ant-form-item-control-input-content {
  color: #fff;
}
.ant-select{
  color: #fff;
}
.ant-select-selection-item, .ant-divider-dashed{
  color: #fff;
}
.ant-input {
  color: #fff;
}
.ant-select-selection-item,
.ant-divider-dashed {
  color: #fff;
}
.ant-btn-link{
  color: #05e618;
}
.spanaa1{
  margin-left: 25px;
}
.tablea1{
  padding: 20px;
  padding-top: 0;
}

</style>
<style>
.ant-form-item-control-input-content {
  color: #fff;
}

.ant-progress-line {
  width: 70%;
}
.ant-modal-body{
  background: #444;;
}
.ant-progress-text{
  color: #fff;
}
</style>